<template>
	<div class="mainContent">
		<pathTracking :path="Model.path" />
		<div class="container">
			<!-- 一级tabs -->
			<el-tabs v-model="Model.activeTab" @tab-click="onTabChange">
				<el-tab-pane label="出库单详情" name="1"></el-tab-pane>
				<el-tab-pane label="开票记录" name="2"></el-tab-pane>
				<el-tab-pane label="操作日志" name="3"></el-tab-pane>
			</el-tabs>
			<div class="tabBox">
				<div class="detailsTabsBtn" v-if="Model.OutofstockBtn == 0">
					<p class="itemBtn" @click="Changeoutofstock">出库</p>
				</div>
				<el-row class="detailTable">
					<el-form :inline="true">
						<el-col :sm="24" :md="12" :lg="8" :xl="6" v-for="(item,index) in Model.tabFormInline" :key="index">
							<el-form-item :label="item.label+'：'">{{item.value}}</el-form-item>
						</el-col>
					</el-form>
				</el-row>
				<div class="tabBoxStep">
					<el-steps :active="Model.stepOption.activeStep">
						<el-step :title="item.title" :description="item.description" v-for="(item,index) in Model.stepOption.step" :key="index"></el-step>
					</el-steps>
				</div>
				<el-row class="detailTable">
					<div class="detailTableItemTitle">
						<img class="detailTableImgSmall" src="@/assets/img/flower_brown.png" alt="">
						<p class="text">出库单基础信息</p>
						<img class="detailTableImgNormal" :src="Model.detailTableFrom.src" alt="" @click="toggleTableDetail('detailTableFrom')">
					</div>
					<el-row class="addbtn" v-if="Model.logisticsBtn">
						<div class="cont">
							<p class="font" @click="getlogistics()">创建物流单号</p>
						</div>
					</el-row>	
					<el-form :inline="true" v-show="Model.detailTableFrom.flag">
						<el-col :sm="24" :md="12" :lg="8" :xl="6" v-for="(item,index) in Model.tableFormInline" :key="index">
							<el-form-item :label="item.label+'：'">{{item.value}}</el-form-item>
						</el-col>
						<el-col :sm="24" :md="12" :lg="8" :xl="6" v-if="Model.interflow">
							<el-form-item label="物流公司：">{{Model.interflowcompany | companyFilters}}</el-form-item>
						</el-col>
						<el-col :sm="24" :md="12" :lg="8" :xl="6" v-if="Model.interflow">
							<el-form-item label="物流单号：">{{Model.interflownumber}}</el-form-item>
						</el-col>
					</el-form>
				</el-row>
				<!-- **********************************************               出库详情                   ************************************** -->
				<div v-show="Model.activeTab==1">
					<el-row class="detailTable">
						<div class="detailTableItemTitle">
							<img class="detailTableImgSmall" src="@/assets/img/flower_brown.png" alt="">
							<p class="text">收货地址</p>
							<img class="detailTableImgNormal" :src="Model.detailTableFrom2.src" alt="" @click="toggleTableDetail('detailTableFrom2')">
						</div>
						<el-form :inline="true" v-show="Model.detailTableFrom2.flag">
							<div class="Adresssame oldAdress">
								<p v-for="(item,index) in Model.tableFormInline2" :key="index">
									<label>{{item.label}}：</label>
									<i>{{item.value}}</i>
								</p>
							</div>
							<div class="Adresssame Adresscenter" v-if="Model.AdressChange">
								请注意：用户地址更新
							</div>
							<div class="Adresssame newAdress">
								<p v-for="(item,index) in Model.tableFormInlineNew" :key="index">
									<label>{{item.label}}：</label>
									<i>{{item.value}}</i>
								</p>
							</div>
						</el-form>
					</el-row>
					<el-row class="detailTable">
						<div class="detailTableItemTitle">
							<img class="detailTableImgSmall" src="@/assets/img/flower_brown.png" alt="">
							<p class="text">商品明细——应出</p>
							<img class="detailTableImgNormal" :src="Model.tab1TableDetail1.src" alt="" @click="toggleTableDetail('tab1TableDetail1')">
							<!-- <img class="detailTableImgNormal" src="@/assets/img/icon_unfold.png" alt="" v-show="Model.tab1TableDetail1"> -->
						</div>
						<div class="detailTableDetail" v-show="Model.tab1TableDetail1.flag">
							<el-table :data="Model.tableData" border style="width: 100%;max-height:550px">
								<el-table-column
									align="center" 
									label='主图'
									>
									<template slot-scope="scope">
										<div class="scopecont">
											<el-tooltip placement="top" effect="light">
											  <div slot="content"><img class="maxTableImg" :src="scope.row.mainPicture" alt=""></div>
											  <img class="mainTableImg" :src="scope.row.mainPicture" alt="">
											</el-tooltip>
										</div>
									</template>
								</el-table-column>
								<el-table-column 
									v-for="(item,index) in Model.tableHeaderData"
									:key="item.prop"
									:prop="item.prop" 
									:label="item.label" 
									:width="item.width" 
								></el-table-column>
							</el-table>
						</div>
					</el-row>
					<!--出库详情 -->
					<div v-if="Model.Outofstock == 1">
						<el-row class="detailTable">
							<div class="detailTableItemTitle">
								<img class="detailTableImgSmall" src="@/assets/img/flower_brown.png" alt="">
								<p class="text">商品明细——实出</p>
							</div>
							<div class="detailTableDetail">
								<el-table :data="Model.tableDataOutNews" border style="width: 100%;max-height:550px">
									<el-table-column
										align="center" 
										label='主图'
										>
										<template slot-scope="scope">
											<div class="scopecont">
												<el-tooltip placement="top" effect="light">
												  <div slot="content"><img class="maxTableImg" :src="scope.row.mainPicture" alt=""></div>
												  <img class="mainTableImg" :src="scope.row.mainPicture" alt="">
												</el-tooltip>
											</div>
										</template>
									</el-table-column>
									<el-table-column 
										v-for="(item,index) in Model.tableHeaderData"
										:key="item.prop"
										:prop="item.prop" 
										:label="item.label" 
										:width="item.width" 
									></el-table-column>
								</el-table>
							</div>
						</el-row>
						<el-row class="detailTable" v-if="Model.PackmaterNewsStatus">
							<div class="detailTableItemTitle">
								<img class="detailTableImgSmall" src="@/assets/img/flower_brown.png" alt="">
								<p class="text">包材明细-实出</p>
							</div>
							<div class="detailTableDetail">
								<el-table :data="Model.tableData2News" border style="width: 100%;max-height:550px" @selection-change="materialSelectionChange">
									<el-table-column 
										v-for="(item,index) in Model.tableHeaderData2"
										:key="item.prop"
										:prop="item.prop" 
										:label="item.label" 
										:width="item.width" 
									></el-table-column>
								</el-table>
							</div>
						</el-row>
					</div>
					<!--出库操作时 -->
					<div v-if="Model.Outofstock == 0">
						<el-row class="detailTable">
							<div class="detailTableItemTitle">
								<img class="detailTableImgSmall" src="@/assets/img/flower_brown.png" alt="">
								<p class="text">商品明细——实出</p>
							</div>
							<div class="OutofstockSearch">
								<el-row class="rows basic">
									<el-col :sm="12" :md="8" :lg="6">
										<el-input class="input-cont" v-model="Model.writeSku" placeholder="请扫码入库/输入SKU" @keyup.enter.native="checkSku"></el-input>
									</el-col>
									<el-col :sm="12" :md="8" :lg="6">
										<div class="items">
											<div class="btn" @click="checkSku">确认</div>
										</div>
									</el-col>
								</el-row>
								<el-row class="addbtn">
									<div class="cont" @click="deleteTableData">
										<p class="font">删除</p>
									</div>
								</el-row>
							</div>
							<div class="detailTableDetail">
								<el-table :data="Model.tableDataOut" border style="width: 100%;max-height:550px" @selection-change="handleSelectionChange">
									<el-table-column type="selection" width="50" fixed></el-table-column>
									<el-table-column
										align="center" 
										label='主图'
										>
										<template slot-scope="scope">
											<div class="scopecont">
												<el-tooltip placement="top" effect="light">
												  <div slot="content"><img class="maxTableImg" :src="scope.row.mainPicture" alt=""></div>
												  <img class="mainTableImg" :src="scope.row.mainPicture" alt="">
												</el-tooltip>
											</div>
										</template>
									</el-table-column>
									<el-table-column 
										v-for="(item,index) in Model.tableHeaderData"
										:key="item.prop"
										:prop="item.prop" 
										:label="item.label" 
										:width="item.width" 
									></el-table-column>
								</el-table>
							</div>
						</el-row>	
						<el-row class="detailTable" v-if="Model.PackmaterStatus">
							<div class="detailTableItemTitle">
								<img class="detailTableImgSmall" src="@/assets/img/flower_brown.png" alt="">
								<p class="text">包材明细-实出</p>
							</div>
							<el-row class="addbtn">
								<div class="cont" @click="PackmaterialsAdd">
									<p class="font">编辑</p>
								</div>
							</el-row>
							<div class="detailTableDetail">
								<el-table :data="Model.tableData2Out" border style="width: 100%;max-height:550px" @selection-change="materialSelectionChange">
									<el-table-column 
										v-for="(item,index) in Model.tableHeaderData2"
										:key="item.prop"
										:prop="item.prop" 
										:label="item.label" 
										:width="item.width" 
									></el-table-column>
								</el-table>
							</div>
						</el-row>
					</div>	
				</div>
				<!-- **********************************************               开票信息                   ************************************** -->
				<div v-show="Model.activeTab==2">
					<el-row class="detailTable">
						<div class="detailTableItemTitle">
							<img class="detailTableImgSmall" src="@/assets/img/flower_brown.png" alt="">
							<p class="text">开票信息</p>
							<img class="detailTableImgNormal" :src="Model.tab2TableDetail1.src" alt="" @click="toggleTableDetail('tab2TableDetail1')">
						</div>
						<div class="detailTableDetail" v-show="Model.tab2TableDetail1.flag">
							<el-table :data="Model.tableData3" border show-summary style="width: 100%;max-height:550px">
								<el-table-column 
									v-for="(item,index) in Model.tableHeaderData3"
									:key="item.prop"
									:prop="item.prop" 
									:label="item.label" 
									:width="item.width" 
								></el-table-column>
							</el-table>
						</div>
					</el-row>
				</div>
				<!-- **********************************************               操作日志                   ************************************** -->
				<div v-show="Model.activeTab==3">
					<el-row class="detailTable">
						<div class="detailTableItemTitle">
							<img class="detailTableImgSmall" src="@/assets/img/flower_brown.png" alt="">
							<p class="text">订单操作日志</p>
							<img class="detailTableImgNormal" :src="Model.tab4TableDetail1.src" alt="" @click="toggleTableDetail('tab4TableDetail1')">
						</div>
						<div class="detailTableDetail" v-show="Model.tab4TableDetail1.flag">
							<el-table :data="Model.tableData4" border show-summary style="width: 100%;max-height:550px">
								<el-table-column prop="createTime" label="时间" width="200"></el-table-column>
								<el-table-column prop="type" label="操作类型" width="120"></el-table-column>
								<el-table-column prop="createBy" label="操作人" width="120"></el-table-column>
								<el-table-column prop="record" label="操作记录"></el-table-column>
							</el-table>
						</div>
					</el-row>
				</div>
				<el-row class="bottom" v-if="Model.Outofstock == 0">
					<div class="btn_group">
						<div class="btn_item" @click="ToOutofstock">确认出库</div>
						<div class="btn_item cancel" @click="goBack">取消</div>
					</div>
				</el-row>
			</div>
		</div>
		<!-- 物流弹窗 -->
		<el-dialog title :visible.sync="Model.logisticsDilog" class="logisticsDilog">
			<div class="common-table-title">
				<div class="common-table-icon"></div>
				<div class="common-table-fl">物流单号</div>
			</div>
			<el-form ref="form" class="logisticsDilogCort">
				<el-form-item label="物流公司">
					<el-select class="input-cont" v-model="Model.logisticsSelect" filterable placeholder="请选择">
						<el-option
						  v-for="(item,index) in Model.allLogistics"
						  :key="index"
						  :label="item.label"
						  :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="物流单号">
					<el-input :disabled="true" class="input-cont" v-model="Model.logisticsNumbers" placeholder="请输入内容"></el-input>
					<span class="logisticsbtn" @click="logisticsNum">创建物流单号</span>
				</el-form-item>
				<el-form-item label="快递付款方式">
					<el-radio v-model="Model.expressWay" label="0">到付</el-radio>
					<el-radio v-model="Model.expressWay" label="1">寄付</el-radio>
				</el-form-item>
			</el-form>
			<div class="viewDialogFooter">
				<div class="viewDialogFooterSure" @click="Surelogistics">确定</div>
				<div class="viewDialogFooterCancel" @click="Model.logisticsDilog = false">取消</div>
			</div>
		</el-dialog>
		<!-- 编辑包材 -->
		<el-dialog title :visible.sync="Model.Packmaterials" class="Packmaterials">
			<div class="common-table-title">
				<div class="common-table-icon"></div>
				<div class="common-table-fl">编辑包材</div>
			</div>
			<div style="padding:30px;background: #fff;">
				<el-table ref="multipleTable" :data="Model.materialsTableData" max-height="350" border>
					<el-table-column type="selection" width="0" fixed></el-table-column>
					<el-table-column 
						v-for="(item,index) in Model.materialsHeader"
						:key="index"
						:prop="item.prop" 
						:label="item.label" 
						:width="item.width">
					</el-table-column>
					<el-table-column label="数量" width="140">
						<template slot-scope="scope">
							<el-input-number v-model="scope.row.outAmount" :min="0" label="描述文字"></el-input-number>
						</template>
					</el-table-column>
					<el-table-column label="单位" width="80">
						<template slot-scope="scope">
							件
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div class="viewDialogFooter">
				<div class="viewDialogFooterSure" @click="surePackmaterials()">确定</div>
				<div class="viewDialogFooterCancel" @click="Model.Packmaterials = false">取消</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import pathTracking from "@/components/common/pathTracking";
	import pagination from "@/components/common/pagination.vue";
	import advancedSearch from "@/components/common/filter/advancedSearch";
	import {
		getDateString
	} from "@/assets/js/common.js";
	import Model from "./model.js";
	import Controller from "./Controller.js";
	export default {
		name: "purchase",
		mixins: [Model, Controller],
		components: {
			advancedSearch,
			pagination,
			pathTracking
		}
	};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
	@import "./index.less";
</style>
